import * as map from './map.js'

//每一个方块的宽高
const wallWidth = 45
const wallHeight = 45

//设置容器宽度高度

const containerWidth = map.colNumber * wallWidth;
const containerHeight = map.rowNumber * wallHeight;

const containerGame = document.querySelector('#game')

function setDivGame() {
    containerGame.style.width = containerWidth + 'px'
    containerGame.style.height = containerHeight + 'px'
}

//判断箱子是否在正确位置
function isCorrect(row, col) {
    // console.log(map.correct, row, col)
    // map.correct.forEach(item => {
    //     if (item.row === row && item.col === col) {
    //         //如果在正确位置就返回true
    //         return true;
    //     }
    // });
    // //循环下来都没有找到，那就返回false
    // return false;
    for (let i = 0; i < map.correct.length; i++) {
        var item = map.correct[i]
        if (item.row === row && item.col === col) {
            return true;
        }
    }
    return false;
}

//设置每个方块的位置
function setOnePiece(row, col) {
    var value = map.content[row][col] //获取当前位置的值
    var div = document.createElement('div'); //创建div
    div.className = 'item' //给div添加一个通用样式item
    div.style.width = wallWidth + 'px' //给div设置宽高
    div.style.height = wallHeight + 'px'
    //设置div的绝对位置
    div.style.left = col * wallWidth + 'px'
    div.style.top = row * wallHeight + 'px'

    //拿到
    var correct = isCorrect(row, col)

    if (value === map.WALL) {
        div.classList.add('wall')
    } else if (value === map.PLAYER) {
        div.classList.add('player')
    } else if (value === map.BOX) {
        //是箱子，这里需要判断箱子是否在正确位置
        if (correct) {
            //在正确位置
            div.classList.add('correct-box')
        } else {
            // 不在正确位置
            div.classList.add('box')
        }
    } else if (value === map.SPACE) {
        //空白位置
        if (correct) {
            //如果是在正确位置
            div.classList.add('correct')
        } else {
            return;
        }
    }

    //将div放入game容器中
    containerGame.appendChild(div)
}

function setContent() {
    containerGame.innerHTML = ''
    for (let row = 0; row < map.rowNumber; row++) {
        for (let col = 0; col < map.colNumber; col++) {
            setOnePiece(row, col)
        }
    }
}

export default function () {
    setDivGame();
    setContent()
}